<template>
  <div class="guide-system">
    <div class="btn-info">
      <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">Show Guide</el-button>
      <span class="text">更多demo请参考 <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a></span>
    </div>

    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item id="step1" title="登录，用户，登出" name="1">
        <div>在界面中输入用户名和密码，拿到token后获取用户的相关信息</div>
        <div>获取用户信息后在vuex存储用户信息，码表，菜单权限, 按钮权限</div>
        <div>userBean, codeMap, menuList, btnList数据可参考@/mock/user.js的模拟数据进行参考</div>
        <div>其它menuList需要和路由配置嵌套一致， 以path进行的递归匹配, btnList则以id匹配</div>
        <div>请求配置路径详情 @/api/user.js</div>
      </el-collapse-item>
      <el-collapse-item id="step2" title="路由配置" name="2">
        <div>根据项目需要分为常规路由和动态路由</div>
        <div>不需要权限配置的路由为常规路由  根据用户权限分配置的路由请配置在中asyncRoutes </div>
        <div>目前已示例引导页的自定义引导页路由只有admin用户有查看权限</div>
      </el-collapse-item>
      <el-collapse-item id="step3" title="接口请求" name="3">
        <div>http请求 axios @/utils/requst.js进行全局请求url, 拦截、错误信息等配置</div>
        <div>常用get, post请求已包装在 @/utils/api/index.js 其它不同请求可在些文件另进行安装</div>
        <div>请求相关参数全局包装也请放在@/utis/api/index.js内 详见文件内注释</div>
        <div>相关方法示例请查看自定义表格项</div>
      </el-collapse-item>
      <el-collapse-item id="step4" title="按钮权限" name="4">
        <div>自定义指令按钮权限 v-permission</div>
        <div>以id进行权限匹配</div>
        <div>目前在自定义表格一菜单进行了按钮权限指令的配置</div>
      </el-collapse-item>
      <el-collapse-item id="step5" title="组件编写" name="5">
        <div>常规页直接添加路由编写组件页即可</div>
        <div>动态路由添加动态路由后需要配置后台menuList的接口返回才可正常显示</div>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from './steps'

export default {
  name: 'Guide',
  data() {
    return {
      driver: null,
      activeNames: ['1']
    }
  },
  mounted() {
    // new driver
    this.driver = new Driver({
      animate: true,
      doneBtnText: '结束'
    })
    // this.guide()
  },
  methods: {
    guide() {
      this.driver.defineSteps(steps)
      this.driver.start()
    },
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss">
.guide-system {
  padding: 0 20px;

  .el-collapse-item__header {
    font-size:16px;  padding-left:20px;
    &.is-active {font-weight: bold;}
  }

  .el-collapse-item__content {
    padding-left:20px;
  }

  .btn-info {
    margin-bottom:20px;
    .text {
      padding-left:20px;
      a { color:rgb(64, 158, 255);  }
    }
  }

}
</style>
